<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../../js/vue.js"></script>
<!--
    总结：
    如果是输入框：收集的是输入值
    如果是radio 收集的是value值
    如果是checkbox
    对象是数组 获取的是value数组
    对象是字符串 获取的是TRUE or FALSE

    v-model
    trim：前后空格忽略
    lazy：失去焦点后输入值
    number：输入值为数字

-->
</head>
<body>
<div id="root">
    <form @submit.prevent="demo">
        账号：<input type="text"  v-model.trim="userInfo.account"><br/>
        密码：<input type="password"  v-model="userInfo.password"><br/>
        年龄：<input type="number"  v-model.number="userInfo.age"><br/>

        性别：<br/>
        男<input type="radio" name="sex" v-model="userInfo.sex" value="male"> <br/>
        女<input type="radio" name="sex" v-model="userInfo.sex" value="female"><br/>
        爱好：<br/>
        抽烟<input type="checkbox" name="hobby" v-model="userInfo.hobby" value="chouyan"> <br/>
        喝酒<input type="checkbox" name="hobby" v-model="userInfo.hobby" value="hejiu"><br/>
        烫头<input type="checkbox" name="hobby" v-model="userInfo.hobby" value="tangtou"><br/>
        所属校区
        <select v-model="userInfo.city">
            <option value="">请选择校区</option>
            <option value="wuhan">wuhan</option>
            <option value="beiji">beiji</option>
            <option value="shanghai">shanghai</option>
        </select><br/>
        其他信息：<br/>
        <textarea v-model.lazy="userInfo.other"></textarea><br/>
        <input type="checkbox" v-model="userInfo.agree">阅读并接受<a href="">用户协议</a><br/>
        <button >提交</button>
    </form>
</div>
<script type="text/javascript">
    Vue.config.productionTip = false
    const  vm = new Vue({
        el:'#root',
        data:{
            userInfo:{
                account:'',
                password:'',
                sex:'female',
                age:'',
                hobby:[],
                city:'',
                other:'',
                agree:'',
            }

        },
        methods:{
            demo(){
                console.log(JSON.stringify(this.userInfo))
            }
        }
    })
</script>
</body>
</html>